import React, { Component } from "react";

export default class TodoFooter extends Component {
  render() {
    const { todos } = this.props;
    const todos_done = todos.filter((item) => item.done);
    const todos_undone = todos.filter((item) => !item.done);

    const undone_length = todos_undone.length;
    const done_length = todos_done.length;

    return (
      <div className="todo-footer">
        <div className="todo-statistics">
          <div>
            进行中 - <span>{undone_length}</span>个
          </div>
          <div>
            已完成 - <span>{done_length}</span>个
          </div>
        </div>
        <button className="todo-clear-button">清空</button>
      </div>
    );
  }
}
